<template>
  <!-- 内容 -->
  <div class="main">
    <div class="container">
      <!-- 选项 -->
      <div class="position-relative">
        <ul class="nav nav-tabs">
          <li class="nav-item">
            <router-link class="nav-link active" :to="'/profile/' + id">个人信息</router-link>
          </li>
          <li class="nav-item">
            <router-link class="nav-link" :to="'/profile/' + id + '/post'">我的帖子</router-link>
          </li>
          <li class="nav-item">
            <router-link class="nav-link" :to="'/profile/' + id + '/reply'">我的回复</router-link>
          </li>
        </ul>
      </div>
      <!-- 个人信息 -->
      <div class="media mt-5">
        <img :src="userInfo.headerUrl" class="align-self-start mr-4 rounded-circle" alt="用户头像" style="width:50px;">
        <div class="media-body">
          <h5 class="mt-0 text-warning">
            <span>{{ userInfo.username }}</span>
            <button type="button" class="btn btn-info btn-sm float-right mr-5 follow-btn" v-if="id != userId && !followStatus" @click="follow">关注TA</button>
            <button type="button" class="btn btn-secondary btn-sm float-right mr-5 follow-btn" v-if="id != userId && followStatus" @click="unfollow">已关注</button>
          </h5>
          <div class="text-muted mt-3">
            <span>注册于 <i class="text-muted">{{ userInfo.createTime }}</i></span>
          </div>
          <div class="text-muted mt-3 mb-5">
            <span>关注了 <a class="text-primary" :href="id + '/followee'">{{ followeeCount }}</a> 人</span>
            <span class="ml-4">关注者 <a class="text-primary" :href="id + '/follower'">{{ followerCount }}</a> 人</span>
            <span class="ml-4">获得了 <i class="text-danger">{{ likeCount }}</i> 个赞</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import User from '@/api/user'
import Like from '@/api/like'
import Follow from '@/api/follow'
import { useUserStore } from '@/store/modules/user'

const userStore = useUserStore()

const route = useRoute()

const userId = ref(0)

const id = ref(0)

const followStatus = ref(false)

const userInfo = ref({})

const followeeCount = ref(0)

const followerCount = ref(0)

const likeCount = ref(0)

onMounted(async () => {
  // 用户id
  id.value = route.params.id
  // 当前用户id
  userId.value = userStore.id
  // 用户信息
  getUserInfo()
  // 关注状态
  getFollowStatus()
  // 关注与被关注数量
  getFolloweeCount()
  getFollowerCount()
  // 获得点赞数量
  getUserLikeCount()
})

const getUserLikeCount = async () => {
  Like.getUserLikeCount(id.value).then(res => {
    likeCount.value = res
  })
}

const getUserInfo = async () => {
  User.getUserInfo(id.value).then(res => {
    userInfo.value = res
  })
}

const follow = async () => {
  Follow.follow(3, id.value).then(() => {
    getFollowStatus()
    getFolloweeCount()
    getFollowerCount()
  })
}

const unfollow = async () => {
  Follow.unfollow(3, id.value).then(() => {
    getFollowStatus()
    getFolloweeCount()
    getFollowerCount()
  })
}

const getFollowStatus = async () => {
  Follow.getFollowStatus(3, id.value).then(res => {
    followStatus.value = res
  })
}

const getFolloweeCount = async () => {
  Follow.getFolloweeCount(id.value, 3).then(res => {
    followeeCount.value = res
  })
}

const getFollowerCount = async () => {
  Follow.getFollowerCount(3, id.value).then(res => {
    followerCount.value = res
  })
}

</script>
